import ExaminationList from '@/components/resourceLibraryComp/ExaminationList';
import VerticalTabs from '@/components/resourceLibraryComp/VerticalTabs';
import type { ICourseWareTab } from '@/components/resourceLibraryComp/VerticalTabs/interface';
import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import OStyle from '../common/style.less';

const examinationTabList: ICourseWareTab[] = [
  {
    key: 'mChoiceQue',
    label: '多选题',
    element: <ExaminationList courseWareFlag="mChoiceQue" key="mChoiceQue" />,
  },
  {
    key: 'sChoiceQue',
    label: '单选题',
    element: <ExaminationList courseWareFlag="sChoiceQue" key="sChoiceQue" />,
  },
  {
    key: 'judgeQue',
    label: '判断题',
    element: <ExaminationList courseWareFlag="judgeQue" key="judgeQue" />,
  },
];

const Examination: React.FC<any> = () => {
  const location = useLocation();
  const [tabActiveKey, setTabActiveKey] = useState('mChoiceQue');
  const [currTabItem, setCurrTabItem] = useState<ICourseWareTab>(examinationTabList[0]);

  const handleTabItemChange = (activeKey: string, tabItem: ICourseWareTab) => {
    setTabActiveKey(activeKey);
    setCurrTabItem({ ...tabItem });
  };

  useEffect(() => {
    const activeTab = location.state?.activeTab;
    if (activeTab) {
      setTabActiveKey(activeTab);
      setCurrTabItem(examinationTabList.find((item) => item.key === activeTab)!);
    }
  }, [location]);

  return (
    <div className={OStyle.course_ware_page}>
      <div className={OStyle.course_ware_page_left}>
        <VerticalTabs
          courseWareTabList={examinationTabList}
          tabActiveKey={tabActiveKey}
          onTabItemChange={handleTabItemChange}
        />
      </div>
      <div className={OStyle.course_ware_page_right}>{currTabItem && currTabItem.element}</div>
    </div>
  );
};

export default Examination;
